<template>

	<view>
		<view class="container">
			<view class="wrap">
				<view class="tip-tag">
					提醒
				</view>
				请遵守校园规定,文明发帖共创和谐健康的校园环境
			</view>
			<view class="one-line" style="margin-top: 19px;">
				<view class="top">
					<view class="title">
						标题
					</view>
					<view class="num">
						{{topicTitleLength}}/20
					</view>
				</view>
				<view class="content">
					<uni-input class="txt">
						<div class="uni-input-wrapper">
							<input maxlength="20" class="uni-input-input" autocomplete="off" enterkeyhint="done"
								placeholder="起个标题叭~" v-model="topicFormData.topicTitle">
						</div>
					</uni-input>
				</view>
				<view class="u-line"
					style="margin: 13px 0px 0px; border-bottom: 1px solid rgb(246, 246, 246); width: 358px; transform: scaleY(0.5); border-top-color: rgb(246, 246, 246); border-right-color: rgb(246, 246, 246); border-left-color: rgb(246, 246, 246);">

				</view>
			</view>
			<view class="u-line"
				style="margin: 0px; border-bottom: 1px solid rgb(200, 200, 200); width: 100%; transform: scaleY(0.5); border-top-color: rgb(200, 200, 200); border-right-color: rgb(200, 200, 200); border-left-color: rgb(200, 200, 200);">
			</view>
			<view class="one-line" style="margin-top: 19px;">
				<view class="top">
					<view class="title">
						内容
					</view>
					<view class="num">
						{{topicContentLength}}/400
					</view>
				</view>
				<view class="content">
					<uni-textarea class="txt input-text post-txt" style="height: auto;">
						<div class="uni-textarea-wrapper" style="height: 21px;">
							<textarea maxlength="1000" enterkeyhint="return" placeholder="说些什么叭..."
								class="uni-textarea-textarea" style="overflow-y: hidden;"
								v-model="topicFormData.topicContent"></textarea>
						</div>
					</uni-textarea>
				</view>
				<view class="u-line"
					style="margin: 0px; border-bottom: 1px solid rgb(200, 200, 200); width: 100%; transform: scaleY(0.5); border-top-color: rgb(200, 200, 200); border-right-color: rgb(200, 200, 200); border-left-color: rgb(200, 200, 200);">
				</view>
			</view>
			<view class="release-btn">
				<view class="btn">
					<view class="btn" @click="onSubmit()">
						发布
					</view>
				</view>
			</view>
		</view>

		<!-- 基础用法，不包含校验规则 -->
		<uni-forms :rules="rules" ref="topicForm" :modelValue="topicFormData">
			<!-- 			<uni-forms-item label="标题" required name="topicTitle" labelWidth="100rpx">
			</uni-forms-item>
			<uni-easyinput v-model="topicFormData.topicTitle" placeholder="请输入标题" />
			<uni-forms-item label="描述一下您的建议/投诉" name="topicContent" labelWidth="500rpx">
			</uni-forms-item>
			<uni-easyinput type="textarea" v-model="topicFormData.topicContent" placeholder="请输入问题内容" />
			</uni-forms-item> -->
			<uni-forms-item label="上传方式" labelWidth="140rpx" style="margin-top: 20rpx;">
				<view style="display: flex; flex-direction: column; justify-content: space-between">
					<uni-data-select v-model="status" :localdata="range"></uni-data-select>
				</view>
			</uni-forms-item>
			<uni-forms-item label="图片上传" labelWidth="140rpx" v-show="status==1">
				<view class="img-box flex flex-wrap">
					<view class="img" v-for="(item, index) in topicFormData.topicImgList">
						<image class="pic" :src="item" mode="aspectFill" @click="lookImg(index)"></image>
						<image @click="delImg(index)" class="close" src="/static/images/close.png" mode="aspectFill">
						</image>
					</view>
					<!-- 上传按钮 -->
					<view class="img upload flex-center" @click="uploadImg" v-show="showSrc">
						<image class="add-pic" src="/static/images/upload.png" mode="aspectFill"> </image>
					</view>
				</view>
			</uni-forms-item>

			<uni-forms-item label="视频上传" labelWidth="140rpx" v-show="status==2">
				<view class="img-box flex flex-wrap">
					<view class="img upload flex-center" v-show="addVideo">
						<image class="pic" src="/static/images/upload.png" @click="test"></image>

					</view>
					<view v-show="showVideo" class="img">
						<video class="pic" :src="topicFormData.topicVideo" style="video"></video>
						<image @click="delVideo" class="close" src="/static/images/close.png" mode="aspectFill">
					</view>
				</view>
			</uni-forms-item>
		</uni-forms>
		<!-- 		<view class="button-group">
			<button class="btn" @click="onSubmit()">提交</button>
		</view> -->
	</view>
	</view>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	import {
		addTopic,

	} from '@/api/topic/topic.js'
	import {
		deleteImage
	} from "@/api/advice/advice.js"
	export default {
		name: "submit-advice",
		data() {
			return {
				showSrc: true,
				showVideo: false,
				addVideo: true,
				status: null,
				topicFormData: {
					topicTitle: '',
					topicContent: '',
					topicImgList: [], //图片
					topicVideo: null
				},
				range: [{
					text: "图片上传",
					value: 1
				}, {
					text: "视频上传",
					value: 2
				}],
				imgMaxNum: 4,
				rules: {
					topicTitle: {
						rules: [{
							required: true,
							errorMessage: '标题不能为空'
						}]
					},
					topicContent: {
						rules: [{
							required: true,
							errorMessage: '建议/投诉不能为空'
						}]
					},
				}
			};
		},
		onLoad() {
			// console.log(this.status);
		},
		computed: {
			topicTitleLength() {
				return this.topicFormData.topicTitle.length
			},
			topicContentLength() {
				return this.topicFormData.topicContent.length
			}
		},
		watch: {
			status() {
				// console.log(this.status);
				if (this.status == "") {
					// console.log(this.topicFormData);
					if (this.topicFormData.topicVideo != null) {
						deleteImage(this.topicFormData.topicVideo).then(res => {
							this.topicFormData.topicVideo = null,
								this.showVideo = false,
								this.addVideo = true
						})
					}
					if (this.topicFormData.topicImgList != null) {
						for (let i = 0; i < this.topicFormData.topicImgList.length; i++) {
							deleteImage(this.topicFormData.topicImgList[i]);
						}
					}

					this.topicFormData.topicImgList = []
				} else if (this.status == 1) {
					if (this.topicFormData.topicVideo != null) {
						deleteImage(this.topicFormData.topicVideo).then(res => {
							this.topicFormData.topicVideo = null,
								this.showVideo = false,
								this.addVideo = true
						})
					}
				} else if (this.status == 2) {
					if (this.topicFormData.topicImgList != null) {
						for (let i = 0; i < this.topicFormData.topicImgList.length; i++) {
							deleteImage(this.topicFormData.topicImgList[i]);
						}
					}
					this.topicFormData.topicImgList = []
				}
			},
			topicFormData: {
				immediate: true,
				deep: true,
				handler(newName, oldName) {
					if (newName.topicImgList == null) {
						this.showSrc = true
					} else if (newName.topicImgList.length == 4) {
						this.showSrc = false
					}
				}
			}
		},
		methods: {
			onSubmit() {
				uni.showModal({
					title: '提交',
					content: '是否确定修改信息',
					success: (res) => {
						if (res.confirm) {
							if (!this.topicFormData.topicTitle) {
								this.$u.toast('标题不能为空');
								return;
							} else if (!this.topicFormData.topicContent) {
								this.$u.toast('内容不能为空');
								return;
							} else {
								if (this.topicFormData.topicImgList == "") {
									this.topicFormData.topicImgList = null
								} else {
									this.topicFormData.topicImgList = this.topicFormData
										.topicImgList
										.toString()
								}
								// console.log(this.topicFormData);
								addTopic(this.topicFormData).then(res => {
									uni.showToast({
										title: '提交成功',
										duration: 2000
									});
								})
								uni.navigateBack()
							}

							// this.$refs.topicForm.validate(['adviceTitle'], (err, formData) => {
							// 	if (!err) {
							// 		this.topicFormData.feedbackPhoto = this.topicFormData
							// 			.imgList
							// 			.toString()
							// 		if (this.topicFormData.feedbackPhoto == "") {
							// 			this.topicFormData.feedbackPhoto = null
							// 		}
							// 		// AddMyAdvice(this.topicFormData).then(res => {
							// 		// 	uni.showToast({
							// 		// 		title: '提交成功',
							// 		// 		duration: 2000
							// 		// 	});
							// 		// })
							// 		uni.navigateBack()
							// 	}
							// })
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			//点击上传视频
			test: function() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						self.showVideo = true
						self.addVideo = false
						uni.uploadFile({
							// url: 'https://hjhhapi.liwinds.online/system/oss/uploadApp',
							url: 'http://localhost:8080/system/oss/uploadApp',
							// url: 'http://192.168.3.36:8080/system/oss/uploadApp',
							filePath: res.tempFilePath,
							name: 'file',
							header: {
								Authorization: "Bearer " + getToken(),
							},
							success: (res) => {
								self.topicFormData.topicVideo = res.data;
							}
						});

					}
				});
			},
			//右上角删除视频
			delVideo() {
				deleteImage(this.topicFormData.topicVideo).then(res => {
					uni.showToast({
						title: '删除成功',
						duration: 2000
					});
					this.topicFormData.topicVideo = null,
						this.showVideo = false,
						this.addVideo = true
				})

			},

			//上传图片
			uploadImg: function() {
				let that = this;
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						if (that.topicFormData.topicImgList.length + tempFilePaths.length > that
							.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							});
						} else {
							//多图上传
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								//显示消息提示框
								//上传逻辑
								uni.uploadFile({
									// url: 'https://hjhhapi.liwinds.online/system/oss/uploadApp',
									url: 'http://localhost:8080/system/oss/uploadApp',
									// url: 'http://192.168.3.36:8080/system/oss/uploadApp',
									filePath: tempFilePaths[i],
									name: 'file',
									header: {
										Authorization: "Bearer " + getToken()

									},
									success: (res) => {
										that.topicFormData.topicImgList.push(res.data)
									}
								});

							}

						}
					}
				});
			},
			// 查看图片
			lookImg: function(val) {
				const urls = this.topicFormData.topicImgList;
				const current = val;
				uni.previewImage({
					urls,
					current
				});
			},
			// 删除图片
			delImg: function(index) {
				let that = this;
				deleteImage(that.topicFormData.topicImgList[index]).then(res => {
					uni.showToast({
						title: '删除成功',
						duration: 2000
					});
					this.topicFormData.topicImgList.splice(index, 1);
				})
			},

		},
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}

	view {
		// font-size: 28rpx;
		line-height: inherit;
	}

	/* #endif */

	// .title {
	// 	font-weight: bold;
	// 	font-size: 38rpx;
	// 	margin-bottom: 16rpx;
	// 	display: flex;
	// 	padding-bottom: 7px;
	// 	border-bottom: 1px #cfcfcf solid;

	// }

	// .btn {
	// 	width: 720rpx;
	// 	height: 70rpx;
	// 	background-color: #f7cb50;
	// 	color: #ffffff;
	// 	font-size: 24rpx;
	// 	line-height: 60rpx;
	// }

	// .example {
	// 	padding: 15rpx;
	// 	background-color: #fff;
	// }


	// .button-group {
	// 	margin-top: 15rpx;

	// 	display: flex;
	// 	justify-content: space-around;
	// }



	.img-box {
		.img {
			width: 200rpx;
			height: 200rpx;
			position: relative;
			margin-left: 20rpx;
			margin-top: 20rpx;

			&:nth-child(3n + 1) {
				margin-left: 0;
			}

			.pic {
				width: 100%;
				height: 100%;
			}

			.close {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}

		.upload {
			border: 1px #b3b3b3 solid;
			background-color: #f6f6f6;

			.add-pic {
				// width: 100rpx;
				// height: 100rpx;
				width: 100%;
				height: 100%;
			}
		}
	}

	.container {
		padding: 10px;
		overflow: scroll;

		.wrap {
			display: flex;
			align-items: center;
			width: auto;
			height: 35px;
			background-color: #444;
			border-radius: 5px;
			font-size: 12px;
			color: #fff;

			.tip-tag {
				margin-left: 9px;
				margin-right: 7px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 33px;
				height: 17px;
				border-radius: 3px;
				background-color: #fff;
				font-size: 10px;
				color: #000;
			}
		}

		.one-line {
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 15px;
					font-weight: 500;
					color: #000;
					line-height: 21px;
				}

				.num {
					font-size: 12px;
					color: #000;
					line-height: 16px;
					opacity: .5;
				}
			}

			.content {
				margin-top: 13px;

				.txt {
					font-size: 15px;
					color: #000;
					line-height: 21px;
				}
			}


		}

		.u-line {
			vertical-align: middle;
		}

		.one-line {
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.num {
					font-size: 12px;
					color: #000;
					line-height: 17px;
					opacity: .5;
				}
			}

			.content {
				margin-top: 13px;

				.txt {
					font-size: 15px;
					color: #000;
					line-height: 21px;
				}

				.post-txt {
					width: 100%;
					padding: 10px 0;
					min-height: 156px;
				}
			}


		}

		.release-btn {
			position: fixed;
			display: flex;
			justify-content: center;
			left: 0;
			bottom: 0;
			width: 390px;
			background-color: #fff;

			.btn {
				width: 358px;
				height: 46px;
				background: linear-gradient(#121212, #666);
				border-radius: 5px;
				font-size: 14px;
				font-weight: 500;
				color: #fff;
				line-height: 46px;
				text-align: center;
			}
		}

	}
</style>
